<template>
	<view class="set">
		<view class="item">
			<view class="txt">
				头像<text class="red">*</text>
			</view>
			<view class="con u-flex">
				<u-image
					class="image u-m-r-20" 
					width="100rpx" 
					height="100rpx" 
					border-radius="100rpx"
					:src="avatarUrl"></u-image>
					<u-icon name="arrow-right" color="#dadada" size="28"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="txt">
				昵称<text class="red">*</text>
			</view>
			<view class="con">
				<input class="tr" type="text" :value="name" placeholder="请输入您的昵称" />
			</view>
		</view>
		<view class="item">
			<view class="txt">
				性别<text class="red">*</text>
			</view>
			<view class="con u-flex">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input u-font-lg">{{array[index]}}</view>
				</picker>
				<u-icon class="u-m-l-20" name="arrow-right" color="#dadada" size="28"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="txt">
				手机<text class="red">*</text>
			</view>
			<view class="con">
				<input class="tr" type="text" :value="phone" placeholder="请输入您的手机号" />
			</view>
		</view>
		<view class="item">
			<view class="txt">
				微信<text class="red">*</text>
			</view>
			<view class="con">
				<input class="tr" type="text" :value="wx" placeholder="请输入您的微信" />
			</view>
		</view>
		<view class="item">
			<view class="txt">
				城市<text class="red">*</text>
			</view>
			<view class="con u-flex">
				<AddressPicker @change="change" class="u-font-lg" :level="3">{{planLocate}}</AddressPicker>
				<u-icon class="u-m-l-20" name="arrow-right" color="#dadada" size="28"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="txt">
				邮箱
			</view>
			<view class="con">
				<input class="tr" type="text" :value="email" placeholder="请输入您的邮箱" />
			</view>
		</view>
		<view class="btn">
			<button class="send">保存我的资料</button>
		</view>
	</view>
</template>

<script>
	import AddressPicker from "@/components/AddressPicker/AddressPicker.vue"
	export default {
		data() {
			return {
				avatarUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs1.sinaimg.cn%2Fbmiddle%2F4a20d21ct6272f6f34780&refer=http%3A%2F%2Fs1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617766987&t=e4e11e1632b5d0f6aea175f6d8b13159',
				name:'Peanut',
				phone:'13212345678',
				wx:'',
				email:'',
				array: ['男', '女'],
				index: 0,
				planLocate:'请选择地址'
			}
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			//父组件的获取子组件传递的值， 在为josn 有code和name 
			change(result) { 
				console.log(JSON.stringify(result.data)); 
				this.planLocate = ''; 
				result.data.forEach((item,index) =>{ 
					if(index===0){ 
						this.planLocate += item.name 
					}else{ 
						this.planLocate += '-' +item.name 
					} 
				}) ; 
				let arr =this.planLocate.split('-'); console.log(arr) 
			}, 
			
		}
	}
</script>

<style lang="scss" scoped>
.set{
	padding-top: 30rpx;
	.item{
		background-color: #fff;
		padding: 30rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		.txt{
			font-weight: 600;
			.red{
				font-weight: 400;
				color: red;
			}
		}
		.con{
			.tr{
				text-align: right;
			}
		}
	}
	.btn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		.send{
			background-color: #de4f38;
			color: #ffff;
			font-size: 32rpx;
			border-radius: 0;
		}
	}
}



</style>
